<template>
  <div class="wrap">
    <template v-if="step === 1">
      <Image :name="nextOneImage" class="icon" height="240" width="208" />
      <div>签署完成，文件正在生成中</div>
      <div>请耐心等待 <span style="color: #1890ff;">{{ countDown }}s</span></div>
    </template>
    <template v-else>
      <Image :name="nextTwoImage" class="icon" height="240" width="268" />
      <div>签署完成！</div>
      <div style="margin: 120px 0 15px">自动返回持有主体列表 ({{ countDown }}s)</div>
      <Button type="text" @confirm="back"><span style="text-decoration: underline">立即返回</span></Button>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Router } from '@U/common'
import { ref, watch } from 'vue'
import Image from '@C/Image.vue'
import Button from '@C/Button.vue'

const nextOneImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/sign_next_1.png`
const nextTwoImage = `${import.meta.env.VITE_SHOUDAO_OSS_URL}/sign_next_2.png`

// 当前页面
const step = ref(1)

// 倒计时
const countDown = ref(10)
const openCountDown = () => {
  const timer = setInterval(() => {
    countDown.value--
  }, 1000)
  setTimeout(() => {
    if (step.value === 2) {
      back()
    }
    clearInterval(timer)
    step.value = 2
    countDown.value = 10
  }, 9 * 1000)
}
openCountDown()
watch(
    () => step.value,
    (newVal: number) => {
      if (newVal === 2) {
        openCountDown()
      }
    },
)

// 返回签约列表
const back = () => {
  step.value = 1
  const backStep = getCurrentPages().length - 2
  Router.back(backStep)
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 28rpx;
  padding-top: 260rpx;
}
.icon {
  width: auto;
  height: auto;
  margin-bottom: 40rpx;
}
</style>
